<template>
    <Teleport to="body">
        <Transition :name="direction">
            <div v-show="show" class="pe-drawer-shadow" :class="modalClass" :style="{ zIndex }" @click="onClose">
                <div class="pe-drawer-body" :style="getInset()" @click.stop>
                    <div v-if="withHeader" class="pe-drawer-header">
                        <slot name="header">{{ title }}</slot>
                        <Close v-if="showClose" class="pe-close" @click.stop="onClose1" />
                    </div>
                    <div class="pe-drawer-main">
                        <slot></slot>
                    </div>
                </div>
            </div>
        </Transition>
    </Teleport>
</template>

<script setup lang="ts">
import { inject, nextTick, ref, watch } from "vue"
import Close from "../../icons/close.vue";

const show = defineModel<boolean>()

/**
 * @param close-on-click-modal 是否可以通过点击 modal 关闭 Drawer
 * @param direction Drawer 打开的方向
 * @param show-close 是否显示关闭按钮
 * @param size Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位
 * @param title Drawer 的标题，也可通过具名 slot （见下表）传入	
 * @param with-header 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 header slot 均不生效
 * @param modal-class 遮罩层的自定义类名
 */
interface Props {
    closeOnClickModal?: boolean,
    direction?: 'right' | 'left' | 'top' | 'bottom',
    showClose?: boolean,
    size?: number | string,
    title?: string,
    withHeader?: boolean,
    modalClass?: string
}

const props = withDefaults(defineProps<Props>(), {
    closeOnClickModal: true,
    direction: "right",
    showClose: true,
    size: "30%",
    withHeader: true
})

/**
 * open Drawer 打开的回调
 * opened Drawer 打开动画结束时的回调
 * close Drawer 关闭的回调
 * closed Drawer 关闭动画结束时的回调 
 */
const emits = defineEmits(['open', 'opened', 'close', 'closed'])

const zIndex = inject("pe-z-index", ref<number>(2000))
watch(show, newShow => {
    if (newShow) {
        zIndex.value++
        emits("open")
        nextTick(() => {
            emits("opened")
        })
    } else {
        emits("close")
        nextTick(() => {
            emits("closed")
        })
    }
})

const onClose = () => {
    if (props.closeOnClickModal) {
        show.value = false
    }
}

const onClose1 = () => {
    show.value = false
}

// 获取定位
const getInset = () => {
    let size = "30%"
    if (typeof props.size === 'number') {
        size = props.size + "px"
    } else if (typeof props.size === 'string') {
        size = props.size
    }
    let top = "auto"
    let right = "auto"
    let bottom = "auto"
    let left = "auto"
    let width = size
    let height = "100%"

    if (props.direction === "left") {
        top = "0"
        left = "0"
    } else if (props.direction === "top") {
        top = "0"
        width = "100%"
        height = size
    } else if (props.direction === "bottom") {
        bottom = "0"
        width = "100%"
        height = size
    } else {
        top = "0"
        right = "0"
    }
    return {
        inset: `${top} ${right} ${bottom} ${left}`,
        width,
        height
    }
}
</script>

<script lang="ts">
export default {
    name: "pe-drawer"
}
</script>